<ion-header>
  <ion-navbar>
    <ion-title>餐台点餐</ion-title>
  </ion-navbar>
</ion-header>
<ion-content padding (ionScroll)="false">
  <div class="container">

    <div class="good-list-container">
      <ion-scroll scrollY="true" class="good-list-left">
        <div class="good-list-types">
          <ng-container *ngFor="let type of goodType;let i = index">
            <div id="type{{i}}" [ngClass]="type.chosen?'good-list-type-click':'good-list-type'" (click)="showGoods(i)">
              <div class="type-font">{{type.name}}</div>
              <i id="icon1{{i}}" class="fa fa-caret-right" aria-hidden="true"
                 [ngClass]="type.chosen?'icon-ctrl-click':'icon-ctrl'"></i>
            </div>
          </ng-container>
        </div>
      </ion-scroll>

      <ion-scroll scrollY="true" class="good-list-right">
        <ng-container *ngFor="let good of tel;">
          <div class="good-list-line">
            <!--<div class="good-image">-->
              <!--<img src="{{good.goodimg}}">-->
            <!--</div>-->
            <div class="good-description-container">
              <div class="good-name">{{good.goodname}}</div>
              <div class="good-details"></div>
              <div class="good-little-container">
                <div class="good-little-container-left">
                  <!--<div class="good-sales">已售{{good.sumbuy}}</div>-->
                  <div class="good-price-container">
                    <div class="good-price-left">￥</div>
                    <div class="good-price">{{good.goodprice}}</div>
                    <div class="good-price-right"></div>
                  </div>
                </div>
              </div>
            </div>
            <div class="good-little-container-change">
              <button>
                <ion-icon name="ios-add-circle-outline" (click)="addGood(good)"></ion-icon>
              </button>
              <div>{{good.sumBuy}}</div>
              <button>
                <ion-icon name="ios-remove-circle-outline" (click)="reduceGood(good)"></ion-icon>
              </button>
            </div>
          </div>
        </ng-container>
      </ion-scroll>

    </div>
    <div class="already-order-box"></div>
  </div>
</ion-content>
<div id="backGroundBg" class="shade" tappable (click)="changeShoppingState()" [ngClass]="shoppingState?'showBack':'hideBack'"></div>
<ion-footer>
  <div class="footer-shopping" [ngClass]="shoppingState?'showItem animated fadeInUp':'hideItem'">
    <div class="footer-shopping-header">
      <span>已选商品</span>
      <button (click)="cleanAll()"><i class="fa fa-trash-o" aria-hidden="true"></i>清空</button>
    </div>
    <ion-scroll scrollY="true" class="footer-shopping-content">
      <ng-container *ngFor="let good of basket.goodslist">
        <ng-container *ngFor="let item of good.goods">
          <div class="content-divider" *ngIf="item.sumBuy>0">
            <div class="divider-left">{{item.goodname}}</div>
            <div class="divider-center">￥{{item.sumPrice}}</div>
            <div class="divider-right">
              <button (click)="addGood(item)"><ion-icon name="ios-add-circle"></ion-icon></button>
              <button>{{item.sumBuy}}</button>
              <button (click)="reduceGood(item)"><ion-icon name="ios-remove-circle-outline"></ion-icon></button>
            </div>
          </div>
        </ng-container>
      </ng-container>
    </ion-scroll>
    <div class="footer-shopping-footer"></div>
  </div>
  <div class="footer-left" (click)="changeShoppingState()">
    <div class="summary">
      <div>
        <ion-icon name="list"></ion-icon>
      </div>
      <div class="summary-text">总价：&nbsp;￥</div>
      <div class="summary-count">{{totalPrice}}</div>
    </div>
    <div class="summary">
      <div class="summary-text">数量：&nbsp;</div>
      <div class="summary-count">{{sumBuy}}</div>
    </div>
  </div>
  <button (click)="print()" class="footer-right" >
    <ion-icon name="print"></ion-icon>厨打
  </button>
  <!--<button class="footer-right" (click)="Settle()">去结算</button>-->
</ion-footer>
